import { ButtonWithTooltip } from "@renderer/components/business/button-with-tooltip";
import { Settings2 } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { ChatParametersSettingModal } from "./setting-modal";

export function ChatParameters() {
  const { t } = useTranslation("translation", {
    keyPrefix: "chat.tool-bar.parameters",
  });

  const [isSettingModalOpen, setIsSettingModalOpen] = useState(false);

  const handleOpenSettingModal = () => {
    setIsSettingModalOpen(true);
  };

  return (
    <>
      <ButtonWithTooltip title={t("title")} onClick={handleOpenSettingModal}>
        <Settings2 className="size-4" />
      </ButtonWithTooltip>

      <ChatParametersSettingModal
        isVisible={isSettingModalOpen}
        onClose={() => setIsSettingModalOpen(false)}
      />
    </>
  );
}
